<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/public/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>思创微尔</title>
  <link rel="stylesheet" href="${ctx}/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="${ctx}/css/news.css">
</head>
<body>
	<div class="layui-fluid shouye">

		<%@ include file="aheader.jsp"%>

	    <div class="layui-row">
        	<div class="layui-col-md12 banner">
        	</div>
        </div>

        <div class="layui-container mb60">
	        <div class="layui-row">
				<%@ include file="alefter.jsp"%>
	          <div class="layui-col-md1">
	          	&nbsp;
	          </div>
	          <div class="layui-col-md9 article">
	          	<p class="article-title">服务方案</p>
	          	<hr class="wide" />
	          	<hr class="thin" />
	          	<ul id="planlist">
					<c:forEach items="${article}" var="a">
	          		<li>
	          			<p class="pull-left news-title">
	          			<a href="${ctx}/">${a.title}</a>
	          			</p>
	          			<p class="pull-right news-time"><fmt:formatDate value="${a.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>

	          			<hr/>
	          		</li>
					</c:forEach>

	          	</ul>
	          	<div id="test1"></div>
	          </div>
	      </div>
	  </div>

		<jsp:include page="afooter.jsp"></jsp:include>
	</div>
	<script src="${ctx}/layui/layui.js"></script>
<script>

  layui.use(['element','jquery','laypage'], function(){
	  var laypage = layui.laypage;
      var element = layui.element;
      var data = ${article};
				  //执行一个laypage实例
				  laypage.render({
					  elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
					  ,count: ${article.size()} //数据总数，从服务端得到
					  ,jump: function(obj){
						  //模拟渲染
						  document.getElementById('planlist').innerHTML = function(){
							  var arr = []
								  ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
							  layui.each(thisData, function(index, item){
								  arr.push('<li>'+ item +'</li>');
							  });
							  return arr.join('');
						  }();
					  }
				  });
				});
</script>
</body>
</html>